<template>
    <div class="product-item">
        <img class="scImg" 
        :src="(filePathType?formData.logo:formData.file_path) == 'UpLoadFiles\\shop.png'?`https://image.pollinations.ai/prompt/${formData.product_name.split('、')[0]}`:store.imgfengMian + (filePathType?formData.logo:formData.file_path)" 
        alt="" loading="lazy">
        <div :style="applyPadding ? { padding: '12px 16px' } : {}">
            <div class="forTitleBox">{{ filePathType?formData.name:formData.product_name }}</div>
            <div class="textflexBox">
                <el-tooltip class="box-item" effect="dark" :content="formData.enterprise_name" placement="top">
                    <div class="forTextBox">{{ formData.enterprise_name }}</div>
                </el-tooltip>
                <div class="buttonBox" @click="spxqdzfun(filePathType?formData.id:formData.product_Id)" >了解详情</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useStore } from '@/store/store';
const store = useStore()
import { useRouter } from 'vue-router';
const router = useRouter();
defineProps({
    filePathType: {
        type: true,
        default: true
    },
    applyPadding: {
        type: Boolean,
        default: true
    },
    formData: {
        type: Object,
        default: () => ({})
    }
})
const spxqdzfun = (id) => {
    router.push({
        path: '/ProductDetails',
        query: { id: id }
    });
}
</script>
<style scoped lang="scss">
.product-item {
    // padding: 5px;
    background: #fff;
    border-radius: 8px;

    .scImg {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1; // 宽高比1:1（可按需修改比例）
        object-fit: cover; // 保持比例填充容器
    }

    .forTitleBox {
        font-size: 14px;
        color: #1F1F1F;
    }

    .textflexBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }

    .forTextBox {
        font-size: 12px;
        color: #676767;
        width: 60%;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .buttonBox {
        padding: 5px 10px;
        background: $button-color;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
    }
}
</style>